<template>

    <el-main>
      <el-button style="margin:5px;"  src="https://i.mmzztt.com/thumb/2018/04/129587_236.jpg" @click="getHref($event,item)" :data-href="item.href" v-for="(item,i) in hotNews" :key="i">{{item.title}}</el-button>
    </el-main>
</template>
<script>
const superagent = require("superagent");
const cheerio = require("cheerio");
export default {
  data() {
    return {
      hotNews: [],
      depositPath: "/Users/yanjiachao/工作/实践/qq/meizi/" //存放照片的地址
    };
  },
  mounted() {
    superagent.get("http://news.baidu.com/").end((err, res) => {
      if (err) {
        // 如果访问失败或者出错，会这行这里
        console.log(`热点新闻抓取失败 - ${err}`);
      } else {
        // 访问成功，请求http://news.baidu.com/页面所返回的数据会包含在reshttp://www.mzitu.com/
        // 抓取热点新闻数据
        //hotNews = getHotNews(res);
        this.hotNews = this.getNews(res);
      }
    });
  },
  methods: {
    getNews(res) {
      console.log(res.text)
      let hotNews = [];
      let $ = cheerio.load(res.text);
      $("ul li a").each((idx, ele) => {
        // cherrio中$('selector').each()用来遍历所有匹配到的DOM元素
        // 参数idx是当前遍历的元素的索引，ele就是当前便利的DOM元素
        let news = {
          title: $(ele).text(), // 获取新闻标题
          href: $(ele).attr("title") // 获取新闻网页链接
        };
        hotNews.push(news); // 存入最终结果数组
      });
      return hotNews;
    },
    getHref(e){
      console.log(e)
        console.log(e.target.tagName)
    }

  }
};
</script>
